<template>
  <div class="content-div">
    <div class="page-bg"></div>
    <div class="frist-head"></div>
    <div class="base-info-box">
      <div class="name-box">
        <img :src="dataInfo.head_sculpture ? dataInfo.head_sculpture : default_head" alt="" srcset="">
        <span>{{dataInfo.name}}</span>
      </div>
      <div class="base-out">
        <div>
          <span>性别：</span>
          <span>{{dataInfo.sex == '1' ? '男' : '女'}}</span>
        </div>
        <div>
          <span>年龄：</span>
          <span>{{dataInfo.age}}</span>
        </div>
        <div>
          <span>护龄：</span>
          <span>{{dataInfo.nurse_age}}年</span>
        </div>
        <div>
          <span>籍贯：</span>
          <span>{{dataInfo.native_place}}</span>
        </div>
      </div>
    </div>
    <div class="base-info-box">
      <div class="gw-box">
        <div>
          <span style="color: #1989fa;">{{dataInfo.goodsNumbers}}</span>
          <span>陪诊次数</span>
        </div>
        <div>
          <span style="color: #FF0000;">{{dataInfo.avgNumber}}%</span>
          <span>好评率</span>
        </div>
        <div>
          <span>{{dataInfo.evaluateNumbers}}</span>
          <span>评论数</span>
        </div>
      </div>
    </div>
    <div class="base-info-box">
      <div class="base-out1">
        <span>陪诊医院：</span>
        <span>{{dataInfo.hospitalName}}</span>
      </div>
      <div class="base-out1 bottom-10">
        <span>陪诊项目：</span>
        <span>{{dataInfo.giveServiceName}}</span>
      </div>
      <div class="base-out1">
        <span>个人简介：</span>
        <span>{{dataInfo.brief_introduction}}</span>
      </div>
    </div>
    <div class="base-info-box2">
      <div style="border-color: #11cbc5;" @click="cellPhone">
        <van-icon color="#11cbc5" name="phone" />
        <span>电话咨询</span>
      </div>
      <div @click="$router.push(`/msgDetail?id=${dataInfo.accompanying_physician_id}`)">
        <van-icon color="#1989fa" name="comment" />
        <span>在线咨询</span>
      </div>
    </div>
    <div class="item-list-box">
      <div class="detail-head">
        <div></div>
        <span>服务项目</span>
      </div>
      <div v-if="dataInfo.serviceList.length">
        <div @click="$router.push(`/productDetail?give_service_id=${item.give_service_id}&&give_service_type=${item.give_service_type}&&payable_amount=${item.give_service_price}`)" class="list-item-box3" v-for="(item, index) in dataInfo.serviceList" :key="index">
          <div class="list-head-box">
            <img :src="item.give_service_picture" alt="" srcset="">
            <div class="list-name-box">
              <span class="list-name">{{item.give_service_name}}</span>
              <!-- <span class="list-name"></span> -->
              <div class="list-money-box">
                <span style="color: #FF0000;font-weight: bold;">￥<span class="money-text">{{item.give_service_price}}</span></span>
                <span class="yy-btn">立即预约</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="pj-list-box">
        <div style="text-align: center;">暂无服务项目</div>
      </div>
    </div>
    <div class="item-list-box">
      <div class="detail-head">
        <div></div>
        <span>用户评价</span>
      </div>
      <div class="pj-outbox">
        <!-- <div class="pj-type-box">
          <span v-for="(item, index) in pjTypeList" :key="index">{{item.name}}</span>
        </div> -->
        <div v-if="dataInfo.commentList.length" class="pj-list-box">
          <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad1"> -->
          <div @click="toPage(item)" class="list-item-box1" v-for="(item, index) in dataInfo.commentList" :key="index">
            <div class="list-head-box">
              <img :src="item.head_sculpture ? item.head_sculpture : default_head" alt="" srcset="">
              <div class="list-name-box">
                <span class="list-name">{{item.nickname}}</span>
                <span class="list-type">{{item.createTime}}</span>
              </div>
              <van-rate allow-half :value="fractionFilter(item.fraction)" readonly />
            </div>
            <div class="list-addr-box">{{item.comment}}</div>
          </div>
          <!-- </van-list> -->
        </div>
        <div v-else class="pj-list-box">
          <div style="text-align: center;">暂无评价</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAccompanyingPhysician } from '@/api/medical.js'
export default {
  name: 'index',
  data () {
    return {
      loading: false,
      finished: false,
      accompanying_physician_id: '',
      dataInfo: {},
      default_head: require('@/assets/images/default-head.jpg'),
      pjTypeList: [
        { id: '1', name: '测试' }
      ],
      star: 5
    }
  },
  created () {},
  // filters: {
  //   fractionFilter: function (value) {
  //     let star = 0
  //     switch (value) {
  //       case 100: star = 5
  //         break
  //       case 90: star = 4.5
  //         break
  //       case 80: star = 4
  //         break
  //       case 70: star = 3.5
  //         break
  //       case 60: star = 3
  //         break
  //       case 50: star = 2.5
  //         break
  //       case 40: star = 2
  //         break
  //       case 30: star = 1.5
  //         break
  //       case 20: star = 1
  //         break
  //       case 10: star = 0.5
  //         break
  //       case 0: star = 0
  //         break
  //       default: star = ''
  //     }
  //     return star
  //   }
  // },
  methods: {
    cellPhone () {
      window.location.href = `tel:${this.dataInfo.tel}`
    },
    getWaiterInfo () {
      getAccompanyingPhysician({
        accompanying_physician_id: this.accompanying_physician_id
      }).then(res => {
        if (res.data.errcode === 0) {
          this.dataInfo = res.data.data
        }
      })
    },
    fractionFilter (value) {
      let star = 0
      switch (value) {
        case 100: star = 5
          break
        case 90: star = 4.5
          break
        case 80: star = 4
          break
        case 70: star = 3.5
          break
        case 60: star = 3
          break
        case 50: star = 2.5
          break
        case 40: star = 2
          break
        case 30: star = 1.5
          break
        case 20: star = 1
          break
        case 10: star = 0.5
          break
        case 0: star = 0
          break
        default: star = ''
      }
      return star
    }
  },
  mounted () {
    this.accompanying_physician_id = this.$route.query.id
    this.getWaiterInfo()
  }
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    background-color: #f8f8f8;
    min-height: 100%;
    position: relative;
    .page-bg{
      width: 120%;
      height: 120px;
      background-color: #1989fa;
      position: absolute;
      top: 0;
      left: -10%;
      border-radius: 0 0 50% 50%;
      z-index: 0;
    }
    .frist-head{
      height: 40px;
    }
    .base-info-box{
      background-color: #FFFFFF;
      width: 300px;
      margin-left: 10px;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 6px;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
      .name-box{
        font-size: 14px;
        padding-bottom: 2px;
        font-weight: bold;
        padding-bottom: 16px;
        img{
          width: 50px;
          height: 50px;
          position: absolute;
          top: -20px;
          border-radius: 50%;
        }
        span{
          padding-left: 60px;
        }
      }
      .base-out{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        div{
          width: 50%;
          span:first-child{
            color: #999999;
          }
        }
      }
      .gw-box{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        div{
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          span:first-child{
            font-size: 16px;
            padding-bottom: 4px;
          }
        }
      }
      .base-out1{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        span:first-child{
          color: #999999;
        }
        span:last-child{
          flex: 1;
        }
      }
    }
    .base-info-box2{
      width: 300px;
      margin-left: 10px;
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      div{
        width: calc(50% - 5px);
        text-align: center;
        height: 30px;
        border: 1px solid #1989fa;
        line-height: 30px;
        border-radius: 5px;
        background-color: #FFFFFF;
        span{
          padding-left: 4px;
        }
      }
    }
    .item-list-box{
      box-sizing: border-box;
      padding: 0 10px 10px;
      .detail-head{
        position: relative;
        margin-bottom: 10px;
        div{
          position: absolute;
          background-color: #1989fa;
          width: 30px;
          bottom: 2px;
          left: 9px;
          box-shadow: 0 0 1px 1px #1989fa;
        }
        span{
          position: relative;
          z-index: 1;
        }
      }
      .list-item-box3{
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid #eeeeee;
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 10px;
        box-shadow: 0px 0px 10px #eeeeee;
        .list-head-box{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          height: 60px;
          .list-name-box{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            height: 100%;
            width: calc(100% - 70px);
            .list-name{
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              white-space: nowrap;
              width: 100%;
            }
            .list-money-box{
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              font-size: 10px;
              .money-text{
                font-size: 12px;
              }
              .yy-btn{
                color: #FFFFFF;
                padding: 2px 10px;
                height: 16px;
                line-height: 16px;
                border-radius: 10px;
                background-color: #1989fa;
              }
            }
          }
          img{
            width: 60px;
            height: 60px;
            margin-right: 10px;
          }
        }
      }
      .pj-outbox{
        background-color: #FFFFFF;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 10px;
        .pj-type-box{
          padding: 6px 0 16px;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          span{
            background-color: #f8f8f8;
            font-size: 10px;
            margin: 0 10px 10px 0;
            padding: 2px 10px;
            border-radius: 20px;
          }
        }
        .pj-list-box{
          .list-item-box1{
            margin-bottom: 10px;
            border-radius: 5px;
            border-bottom: 1px solid #eeeeee;
            box-sizing: border-box;
            padding: 4px 4px 10px;
            .list-head-box{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              padding-bottom: 6px;
              height: 36px;
              .list-name-box{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                height: 100%;
                width: calc(100% - 46px - 90px);
                .list-name{
                  font-weight: bold;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  word-break: break-all;
                  white-space: nowrap;
                  width: 100%;
                }
                .list-type{
                  font-size: 10px;
                  color: #999999;
                }
              }
              img{
                width: 36px;
                height: 36px;
                margin-right: 10px;
                border-radius: 50%;
              }
              /deep/ .van-rate__icon{
                font-size: 14px;
              }
            }
            .list-addr-box{
              color: #999999;
              width: 100%;
            }
          }
        }
      }
    }
  }
  .bottom-10{
    padding-bottom: 10px;
  }
</style>
